<template>
  <a-modal
    title="新增乐管家"
    :width="800"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item label="门店类型">
          <a-select v-decorator="['store_type']" placeholder="请选择类型">
            <a-select-option :value="key" v-for="(item, key) in storeTypeList" :key="item">{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="名称">
          <a-input v-decorator="['name']" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input v-decorator="['mobile']" placeholder="请输入手机号" />
        </a-form-item>
        <a-form-item label="家庭住址">
          <a-input-group compact>
            <a-input v-decorator="['family_address']" placeholder="请输入家庭住址" />
          </a-input-group>
        </a-form-item>
        <a-form-item label="门店名称">
          <a-input v-decorator="['shop_name']" placeholder="请输入门店名称" />
        </a-form-item>
        <a-form-item label="申请地址">
          <a-input-group compact>
            <a-select placeholder="请选择省" @change="onProvinceChange" style="width: 155px" v-decorator="['provinceid']">
              <a-select-option :value="item.provinceid" v-for="item in provinceList" :key="item.id">{{
                item.province
              }}</a-select-option>
            </a-select>
            <a-select placeholder="请选择市" @change="onCityChange" style="width: 155px" v-decorator="['cityid']">
              <a-select-option :value="item.cityid" v-for="item in cityList" :key="item.id">{{
                item.city
              }}</a-select-option>
            </a-select>
            <a-select placeholder="请选择区" style="width: 155px" v-decorator="['areaid']">
              <a-select-option :value="item.areaid" v-for="item in areaList" :key="item.id">{{
                item.area
              }}</a-select-option>
            </a-select>
            <a-input
              v-decorator="['apply_address']"
              placeholder="请输入申请地址"
              style="width: 76.8%; margin-top: 10px"
            />
            <a-button icon="search" @click="openMap" style="margin-top: 10px">地图选点</a-button>
          </a-input-group>
        </a-form-item>
        <a-form-item label="经纬度">
          <a-input v-decorator="['position']" placeholder="请输入经纬度" />
        </a-form-item>
        <a-form-item label="门店照片" style="margin-bottom: 0">
          <d-upload
            v-decorator="[
              'shop_img',
              {
                initialValue: '',
              },
            ]"
          >
          </d-upload>
        </a-form-item>
        <a-row>
          <a-col :span="9" :offset="3">
            <a-form-item label="身份照片" style="margin-bottom: 0" :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }">
              <d-upload
                v-decorator="[
                  'id_front_img',
                  {
                    initialValue: '',
                  },
                ]"
                text="请上传正面"
              >
              </d-upload>
            </a-form-item>
          </a-col>
          <a-col :span="10" style="margin-left: -40px">
            <a-form-item style="margin-bottom: 0">
              <d-upload
                v-decorator="[
                  'id_back_img',
                  {
                    initialValue: '',
                  },
                ]"
                text="请上传反面"
              >
              </d-upload>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item style="margin-bottom: 0" label="营业执照">
          <d-upload
            v-decorator="[
              'license_img',
              {
                initialValue: '',
              },
            ]"
          >
          </d-upload>
        </a-form-item>
        <a-form-item label="简介">
          <a-textarea v-decorator="['brief']" placeholder="请填写简介" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { STORE_TYPE_MAP } from '@/mixins/storeType'
import { storeStewardAdd } from '@/api/store'
import formModalMixin from '@/mixins/formModalMixin'
import { provinceLink, cityLink, areaLink } from '@/api/notControl'

// 表单字段
const fields = ['name', 'family_address', 'mobile', 'apply_address', 'store_type', 'id_front_img', 'license_img', 'id_back_img', 'shop_img', 'position', 'shop_name', 'cityid', 'provinceid', 'areaid']

export default {
  mixins: [formModalMixin],
  data () {
    this.fields = fields
    this.addAction = storeStewardAdd
    return {
      storeTypeList: STORE_TYPE_MAP,
      formLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        }
      },
      provinceList: [],
      cityList: [],
      areaList: []
    }
  },
  created () {
    provinceLink().then(res => {
      this.provinceList = res.data
    })
  },
  methods: {
    openMap () {
      window.open('https://lbs.amap.com/tools/picker')
    },
    handleOkBefore (values) {
      const [lng, lat] = (values.position || '').split(',')
      const province = this.provinceList.find(province => province.provinceid === values['provinceid'])
      const city = this.cityList.find(city => city.cityid === values['cityid'])
      const area = this.areaList.find(area => area.areaid === values['areaid'])
      return {
        ...values,
        lng,
        lat,
        province: (province && province.province) || undefined,
        city: (city && city.city) || undefined,
        area: (area && area.area) || undefined
      }
    },
    onProvinceChange (provinceid) {
      return cityLink({ provinceid }).then(res => {
        this.cityList = res.data
        this.form.setFieldsValue({ cityid: undefined })
      })
    },
    onCityChange (cityid) {
      return areaLink({ cityid }).then(res => {
        this.areaList = res.data
        this.form.setFieldsValue({ areaid: undefined })
      })
    }
  }
}
</script>
